<template>
  <div v-if="isLogin">
    <el-container>
      <el-header class="header">
        <h2>起点（MES）-生产执行管理系统</h2>
      </el-header>
      <el-container>
        <el-aside class="aside" width="200px">
          <el-row>
            <el-col :span="24">
              <el-menu active-text-color="#ffd04b" background-color="#606266" default-active="2" text-color="#fff"
                ref="menu" :router="false" :unique-opened="true" :default-active="currMenu" @select="handlerSelect">
                <template v-for="menu in menus" :key="menu.name">
                  <el-sub-menu :index="menu.path" v-if="menu.children != undefined && menu.children.length > 0">
                    <template #title><span>{{ menu.meta.title }}</span></template>
                    <template v-if="menu.children != undefined && menu.children.length > 0">
                      <template v-for="subMenu in menu.children" :key="subMenu.name">
                        <el-sub-menu v-if="subMenu.children != undefined && subMenu.children.length > 0">
                          <template #title><span>{{ subMenu.meta.title }}</span></template>
                          <template v-for="smenu in subMenu.children" :key="smenu.name">
                            <el-menu-item :index="smenu.path">{{ smenu.meta.title }}</el-menu-item>
                          </template>
                        </el-sub-menu>
                        <el-menu-item v-else :index="subMenu.path">{{ subMenu.meta.title }}</el-menu-item>
                      </template>
                    </template>
                  </el-sub-menu>
                  <el-menu-item v-else :index="menu.path">{{ menu.meta.title }}</el-menu-item>
                </template>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main class="main">
          <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="tabClick">
            <el-tab-pane index="index" name="index" label="首页"></el-tab-pane>
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name" closable
              @tab-remove="removeTab" @tab-click="tabClick">
            </el-tab-pane>
          </el-tabs>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <div  v-else>
    <el-dialog v-model="showDialog"
      title="登陆"
      width="30%"
      :fullscreen="false"
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false">
      <el-form :model="sysUser" label-width="120px">
      <el-form-item label="登录名">
        <el-input v-model="sysUser.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="sysUser.userPass" type="password" />
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="sysUser.code"  />
        <el-image :src="codeSrc" @click="flushCode"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doLogin">登陆</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>
  
<script>
import router from "../router";
import ssoRequest from "../aip/sso-api";
export default {
  data() {
    return {
      editableTabsValue: "welcome",
      editableTabs: [

      ],
      menus: [],
      currMenu: "/",// 当前激活的菜单的路由
      defaultOpeneds: [],

      isLogin: false,// 标记当前是否是登陆状态
      sysUser:{},// 绑定登陆表单中的用户信息
      showDialog:true,// 表示登陆窗体是否显示
      codeSrc: "http://localhost:8580/sysUser/getCode?codeTag="+this.codeTag,
      codeTag: "s"+new Date().getTime()
    }
  },
  methods: {
    flushCode(){
      this.codeTag = "s"+new Date().getTime();
      this.codeSrc = "http://localhost:8580/sysUser/getCode?codeTag="+this.codeTag;
    },
    /**
     * 登陆按钮的事件
     */
    doLogin(){
      // 校验:略
      ssoRequest.login(this.sysUser,res=>{
        if(res.code == 200){
          this.$message({
            type:"success",
            message:"登陆成功"
          });
          // 修改相关属性
          this.showDialog = false;
          this.isLogin = true;
          // 记录token到localStorage中
          localStorage.setItem("token",res.msg);
        }else{
          this.$message({
            type:"error",
            message:"登陆失败"
          });
        }

      })
    },
    /**
     * 菜单的激活事件监听
     * @param index 菜单的唯一标志，我们这里放的就是对应的路由路径
     * @param indexPath 一个数组，包含了菜单的父菜单的路径和当前菜单的路径
     * @param item 一个对象，包含了菜单的几乎所有的信息
     * @param routeResult
     */
    handlerSelect(index, indexPath, item, routeResult) {
      // 这里可以进行编程式路由
      this.$router.push(index); // 跟写router-link标签一样的
      if (index == "/index") {
        this.editableTabsValue = "index";
        return;
      }
      // 添加或者筛选一个标签
      this.addTab(index);
    },
    // 单机选项卡
    tabClick(tab) {
      console.log(tab);
      this.editableTabsValue = tab.props.name;
      this.$router.push("/" + tab.props.name);
      this.currMenu = "/" + tab.props.name;
      // console.log("/"+tab.props.name);
      // this.defaultOpeneds = ["/"+tab.props.name]
      //this.$refs.menu.open("/"+tab.props.name);
    },
    // 删除tab
    removeTab(tabName) {
      let currTab = undefined;
      let flag = true;
      this.editableTabs = this.editableTabs.filter(e => {

        if (e.name == tabName) {
          flag = false;
          return false;
        } else {
          if (flag) {
            currTab = currTab;
          }
          return true;
        }

      });
      if (currTab == undefined) {
        currTab = "index"
      }
      this.editableTabsValue = currTab;
      this.$router.push("/" + currTab);
    },
    //新增tab
    addTab(index) {
      // console.log(index);
      // console.log(this.menus);
      for (let i = 0; i < this.rs.length; i++) {
        let route = this.rs[i];
        // console.log(route);
        // console.log(route.path,index);
        if (route.path == index) {
          // console.log(123123);
          let exists = false;
          for (let x = 0; x < this.editableTabs.length; x++) {
            let tabObj = this.editableTabs[x];
            if (tabObj.name == route.name) {
              this.editableTabsValue = tabObj.name;
              exists = true;
              break;
            }
          }
          if (!exists) {
            console.log(route);
            this.editableTabs.push({
              path: route.path,
              name: route.name,
              title: route.meta.title
            });
            console.log(this.editableTabs);
            this.editableTabsValue = route.name
          }
        }
      }
    },
    //登陆状态校验
    checkLogin(){
      ssoRequest.checkLogin(res=>{
        if(res.code == 200){
          this.showDialog = false;
          this.isLogin = true;
        }else{
          this.showDialog = true;
          this.isLogin = false;
        }
      })
    }
  }, mounted() {
    this.checkLogin();// 页面一加载就调用checkLogin
    this.rs = router.getRoutes();
    this.menus = router.options.routes;
  }
};
</script>
  
<style scopde>
.header {
  background-color: #606266;
  color: aliceblue;
}

.aside {
  margin-top: 5px;
  border: 1px solid #606266;
}

.main {
  margin-top: 5px;
  border: 1px solid #606266;
  min-height: 800px;
}
</style>